<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>

    <!-- 
        通常使用在于标准的值进行多个纬度的对比
     -->
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
</body>
<script>
    var mEcharts = echarts.init(document.querySelector("div"))
    // 要有定义各个纬度的最大范围值
    var dataMax=[
        {
            name:'易用性',
            max:100
        },
        {
            name:'功能',
            max:100
        },
        {
            name:'拍照',
            max:100
        },
        {
            name:'跑分',
            max:100
        },
        {
            name:'续航',
            max:100
        }
    ]
    var option ={
        // 通过radar来配置雷达图
        radar:{
            indicator:dataMax,
            shape:'circle'  // 可以配置雷达图最外层的图形
        },
        legend:{
            data:['华为手机1','中兴手机1']
        },
        series:[
            {
                type:'radar',
                label:{
                    show:true
                },
                areaStyle:{

                },
                data:[
                    {
                        name:'华为手机1',
                        value:[80,90,80,82,90]
                    },
                    {
                        name:'中兴手机1',
                        value:[70,82,75,70,78]
                    }
                ]
            }
        ]
       
    }
    mEcharts.setOption(option)   
  
</script>
</html>